<template>
	<view class="minWidth">
		<f-navbar title="表白墙" fontColor="#ffffff" bgColor="#ff7ba3" :scrollTop="scrollTop" navbarType='0'></f-navbar>

		<!-- 筛选 -->
		<view class="screenFlex" style="padding: 30rpx 0;border-bottom: 1rpx solid silver;">
			<view class="selectedText">
				全部
			</view>
			<view class="screenFlex" style="width: 350rpx;">
				<view class="screenTagBox">
					推荐
				</view>
				<view class="screenTagBox">
					热门
				</view>
				<view class="screenTagBox">
					最新
				</view>
				<view class="screenTagBox" @click="showDrawer('showRight')">
					学校
				</view>
			</view>
		</view>


		<!-- 便签 -->
		<view class="">
			<view class="waterfall">
				<view class="messageBox" v-for="(item, index) in messageDate" :key="index">
					<image v-if="item.back == 0" class="messageImg" src="@/static/confession/信签纸0.png"
						style="width: 100%" mode="widthFix"></image>

					<image v-else-if="item.back == 1" class="messageImg" src="@/static/confession/信签纸1.png"
						style="width: 100%" mode="widthFix"></image>

					<image v-else-if="item.back == 2" class="messageImg" src="@/static/confession/信签纸2.png"
						style="width: 100%" mode="widthFix"></image>

					<image v-else class="messageImg" src="@/static/confession//信签纸3.png" style="width: 100%"
						mode="widthFix"></image>

					<view class="tcolors-bg" style="padding: 15px" :style="{ background: backList[item.back] }">
						<view class="flex_start">
							<view class="headBoxImg">
								<image style="width: 100%" :src="item.avatar" mode="aspectFill" />
							</view>

							<view>
								<view class="titleName">{{ item.nickName }}</view>
								<view class="dateText">
									{{ item.createTime.substring(0, 10) }}
								</view>
							</view>
						</view>

						<!-- 正文内容 -->
						<view class="headBoxImg_text">
							{{ item.text }}
						</view>
						<view class="headBoxImg_img">
							<image style="width: 100%" :src="item.img" mode="widthFix" />
						</view>
						 <view class="flex" style="margin-top: 30rpx;margin-left: 100rpx;">
						<view class="flex" style="margin-right: 20rpx;">
							<span class="icon" style="color: #434343;font-size: 30rpx;font-weight: bold;margin-right: 10rpx;">&#xe7f5;</span>
							<span style="color: #434343;font-size: 26rpx;font-weight: bold;">3</span>
						</view>
		
							<view class="flex">
								<span class="icon" style="color: #434343;font-size: 30rpx;font-weight: bold;margin-right: 10rpx;">&#xec7f;</span>
								<span style="color: #434343;font-size: 26rpx;font-weight: bold;">99</span>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>



		<view class="example-body">
			<!-- 		<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
		</button> -->
			<uni-drawer style="margin-top: 80rpx;" ref="showRight" mode="right" width=300 :mask-click="false"
				@change="change($event,'showRight')">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="info-content " style="margin-top: 200rpx;">
							<view class="tagBox" v-for="(item,index) in tagList" :key="index" @click="tagFun(item.id)"
								:class="{isSelected:item.selected}">
								{{item.title}}
							</view>
						</view>
						<view class="btnBox">
							<view class="close" @click="closeDrawer('showRight')">
								关闭
							</view>
							<view class="confirm">
								确认
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				messageDate: [{
						img: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						nickName: "路边的野花不要采",
						avatar: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						createTime: "2022-20-10",
						text: "周杰伦",
						back: 0
					},
					{
						img: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						nickName: "路边的野花不要采",
						avatar: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						createTime: "2022-20-10",
						text: "或许你不懂的我的感伤，常常困惑于我的优柔寡断，或许，你永远触摸不到我心底的这份宁静",
						back: 3
					},
					{
						img: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						nickName: "路边的野花不要采",
						avatar: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						createTime: "2022-20-10",
						text: "或许你不懂的我的感伤，常常困惑于我的优柔寡断，或许，你永远触摸不到我心底的这份宁静",
						back: 1
					},
					{
						img: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						nickName: "路边的野花不要采",
						avatar: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						createTime: "2022-20-10",
						text: "或许你不懂的我的感伤，常常困惑于我的优柔寡断，或许，你永远触摸不到我心底的这份宁静",
						back: 2
					},
					{
						img: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						nickName: "路边的野花不要采",
						avatar: "http://lcwc.xyz/2023/03/16/924126c412b2479e80e0925d52ce419f.jpg",
						createTime: "2022-20-10",
						text: "或许你不懂的我的感伤，常常困惑于我的优柔寡断，或许，你永远触摸不到我心底的这份宁静",
						back: 3
					}
				],
				backList: ["#e1b252", "#b7f1fd", "#a7efeb", "#f1d6dd"],
				tagList: [{
						title: '贵州大学',
						id: 0,
						selected: false,
					},
					{
						title: '贵州医科大学',
						id: 1,
						selected: false,
					},
					{
						title: '贵州中医药大学',
						id: 2,
						selected: false,
					},
					{
						title: '贵州师范大学',
						id: 3,
						selected: false,
					},
					{
						title: '贵州财经大学',
						id: 4,
						selected: false,
					},
					{
						title: '贵州民族大学',
						id: 5,
						selected: false,
					},
					{
						title: '贵州大学明德学院',
						id: 6,
						selected: false,
					},
					{
						title: '贵州民族大学人文科技学院',
						id: 7,
						selected: false,
					},
					{
						title: '贵州轻工职业技术学院',
						id: 8,
						selected: false,
					},
					{
						title: '贵州城市职业学院',
						id: 9,
						selected: false,
					},
					{
						title: '贵州交通职业技术学院',
						id: 10,
						selected: false,
					},
					{
						title: '贵州工业职业技术学院',
						id: 11,
						selected: false,
					},
					{
						title: '贵州电力职业技术学院',
						id: 12,
						selected: false,
					},
					{
						title: '贵州职业技术学院',
						id: 13,
						selected: false,
					},
					{
						title: '贵州建设职业技术学院',
						id: 14,
						selected: false,
					},
					{
						title: '贵州农业职业学院',
						id: 15,
						selected: false,
					}
				],

			}
		},
		methods: {
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			tagFun(id) {
				console.log("id==" + id)
				for (var i = 0; i < this.tagList.length; i++) {
					if (this.tagList[i].id == id) {
						console.log("id==" + id)
						this.tagList[i].selected = !this.tagList[i].selected
					}
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		 // background-color: #ffd8d9;
		/* 设置背景颜色为灰色 */

		background-color: rgba(255, 103, 164, 0.1);
	}

	.minWidth {
		width: 680rpx;
		margin: 0 auto;
	}

	.btnBox {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.screenFlex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.screenTagBox {
		padding: 10rpx;
		color: #ff4c91;
		font-size: 20rpx;
		border-radius: 5rpx;
		background-color: rgba(255, 103, 164, 0.2);
	}

	.selectedText {
		font-weight: bold;
		font-size: 26rpx;
	}

	.close {
		width: 150rpx;
		height: 40rpx;
		color: #757575;
		font-size: 20rpx;
		line-height: 40rpx;
		border-radius: 50rpx;
		border: 1rpx solid #757575;
		text-align: center;
		padding: 20rpx;
	}

	.confirm {
		width: 200rpx;
		height: 80rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #f69000;
		text-align: center;
	}



	.tagBox {
		margin: 30rpx 20rpx;

	}

	.isSelected {
		color: #f69000;
	}
	
	.flex{
		display:flex;
		justify-content: flex-start;
		 align-items: center;
	}



	// pc
	.line {
		width: 100%;
		background: #e1e1e1;
		height: 1rpx;
	}

	.waterfall {



		// column-gap: 10px;
		column-count: 2;
		// -moz-column-gap: 1em;
		// -webkit-column-gap: 1em;
		column-gap: 30rpx;


	}

	.tRewardBox section {
		padding-bottom: 20rpx;
	}

	.tRewardBox section h1 {
		margin: 10px 0;
		font-size: 25rpx;
		font-weight: 700;
		/*text-align: center;*/
		line-height: 30rpx;
	}

	.tRewardBox section p {
		margin: 10rpx 0;
		line-height: 24rpx;
	}

	.tRewardBox section hr {
		background: #ccc;
		margin-bottom: 30rpx;
	}

	.tRewardBox .donate-item {
		text-align: right;
		color: #44b549;
	}

	.tRewardBox .donate-item:last-child {
		text-align: left;
		color: #00a0e9;
	}

	.tRewardBox .donate-item img {
		width: 100%;
		display: block;
		height: auto;
	}

	.tRewardBox .donate-item view {
		display: inline-block;
		width: 150rpx;
		padding: 0 6rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.tRewardBox .donate-item view span {
		display: inline-block;
		width: 100%;
		margin: 10rpx 0;
		text-align: center;
	}

	.tRewardBox .el-table__body-wrapper {
		overflow: hidden;
	}

	.messageBox {
		margin-bottom: 30rpx;
		// overflow: auto;
		break-inside: avoid;
		/* 防止元素被分割 */
	
		// border-radius:10rpx;
	}
	
	.tcolors-bg {
			box-shadow: #918e8e 0 0 15rpx;
	}

	.headBoxImg {
		width: 60rpx;
		height: 60rpx;
		background-color: #44b549;
		border-radius: 80rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		margin-right: 10rpx;
	}

	.messageBox .titleName {
		font-size: 22rpx;
	}

	.messageBox .dateText {
		font-size: 26rpx;
		color: #7c7c7c;
	}

	.flex_start {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.headBoxImg_text {
		color: #272626;
		margin-top: 20rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		// line-height: 23rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 15;
		-webkit-box-orient: vertical;
		text-indent: 2em;
		margin-bottom: 20rpx;
	}

	.headBoxImg_img {
		border-radius: 3rpx;
		overflow: hidden;
	}

	.messageImg {
		position: relative;
		top: 10rpx;

	}

	//pc2
</style>